/**
 * 培训记录详情
 */
<template>
    <el-form v-loading="loading" :model="formData" :rules="currentFormRules" ref="formRef" label-width="120px" :scroll-to-error="true">
        <vp-card>
            <template #header>
                <vp-label zh="基本信息" en="Basic Info" />
            </template>
            <el-row>
                <vp-col :span="4">
                    <el-form-item prop="rydaid">
                        <template #label><vp-label zh="人员" en="Person"/></template>
                        <el-input readonly v-model="formData.ryxm" v-if="isEditPage">
                            <template #append>
                                <el-button @click="handleChooseStudent"><SvgIcon name="ele-Search"/></el-button>
                            </template>
                        </el-input>
                        <el-link v-else @click="handleViewPersonnelFile(formData.rydaid)">{{ formData.ryxm }}</el-link>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="bm">
                        <template #label><vp-label zh="所在部门" en="Department"/></template>
                        <el-input disabled v-model="formData.bm" v-if="isEditPage">
                        </el-input>
                        <span v-else>{{ formData.bm }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="4">
                    <el-form-item prop="kcid">
                        <template #label><vp-label zh="课程编号" en="Course No."/></template>
                        <el-input v-model="formData.kcbh" readonly v-if="isEditPage">
                            <template #append>
                                <el-button @click="handleChooseCourse"><SvgIcon name="ele-Search" /></el-button>
                            </template>
                        </el-input>
                        <el-link v-else @click="handleViewCourse(formData.kcid)">{{ formData.kcbh }}</el-link>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="kcmcZw">
                        <template #label><vp-label zh="课程名称(中)" en="Course Name (ZH)"/></template>
                        <el-input v-model="formData.kcmcZw" disabled v-if="isEditPage">
                        </el-input>
                        <span v-else>{{ formData.kcmcZw }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="kcmcYw">
                        <template #label><vp-label zh="课程名称(英)" en="Course Name (EN)"/></template>
                        <el-input v-model="formData.kcmcZw" disabled v-if="isEditPage">
                        </el-input>
                        <span v-else>{{ formData.kcmcYw }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="kclb">
                        <template #label><vp-label zh="课程类别" en="Couse Category"/></template>
                        <el-input v-model="formData.kclb" disabled v-if="isEditPage">
                        </el-input>
                        <span v-else>{{ formData.kclb }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="ksrqsj">
                    <template #label><vp-label zh="开始时间" en="Start Time"/></template>
                        <el-date-picker
                            v-model="formData.ksrqsj"
                            value-format="YYYY-MM-DD HH:mm"
                            format="YYYY-MM-DD HH:mm"
                            time-format="HH:mm"
                            type="datetime"
                            v-if="isEditPage"
                            class="w100"
                        />
                        <span v-else>{{ formData.ksrqsj }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="jsrqsj">
                    <template #label><vp-label zh="结束时间" en="End Time"/></template>
                        <el-date-picker
                            v-model="formData.jsrqsj"
                            value-format="YYYY-MM-DD HH:mm"
                            format="YYYY-MM-DD HH:mm"
                            time-format="HH:mm"
                            type="datetime"
                            v-if="isEditPage"
                            class="w100"
                        />
                        <span v-else>{{ formData.jsrqsj }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="ks">
                        <template #label><vp-label zh="课时" en="Class Hour" /></template>
                        <el-input 
                            v-model="formData.ks" 
                            v-if="isEditPage" 
                            @input="(val:string) => {formData.ks = verifyNumberIntegerAndFloat(val) }" 
                            v-trim
                            maxlength="8"
                        >
                            <template #append>Hrs</template>
                        </el-input>
                        <span v-else>{{ formData.ks || formData.ks === 0 ? formData.ks + 'Hrs' : '' }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="pxxs">
                        <template #label><vp-label zh="培训形式" en="Training Format" /></template>
                        <VpDictSelect 
                            :lxid="602" 
                            :selectedId="formData.pxxs"
                            v-if="isEditPage"
                            @dictSelected="dicts => { formData.pxxs = dicts }" 
                            class="w100" 
                        />
                        <span v-else>{{ formData.pxxs }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="ksxs">
                        <template #label><vp-label zh="考试形式" en="Exam Format" /></template>
                        <VpDictSelect 
                            :lxid="603" 
                            :selectedId="formData.ksxs"
                            v-if="isEditPage"
                            @dictSelected="dicts => { formData.ksxs = dicts }" 
                            class="w100" 
                        />
                        <span v-else>{{ formData.ksxs }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="pxjg">
                        <template #label><vp-label zh="培训机构" en="Training Org." /></template>
                        <el-input v-model="formData.pxjg" v-if="isEditPage" v-trim maxlength="100">
                        </el-input>
                        <span v-else>{{ formData.pxjg }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="pxdd">
                        <template #label><vp-label zh="培训地点" en="Training Location" /></template>
                        <el-input v-model="formData.pxdd" v-if="isEditPage" v-trim maxlength="100">
                        </el-input>
                        <span v-else>{{ formData.pxdd }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="cj">
                        <template #label><vp-label zh="成绩" en="Score" /></template>
                        <el-input v-model="formData.cj" v-if="isEditPage" @input="(val:string) => {formData.cj = verifyNumberIntegerAndFloat1(val) }" maxlength="6" />
                        <span v-else>{{ formData.cj }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="zsbh">
                        <template #label><vp-label zh="证书编号" en="Certificate No."/></template>
                        <el-input v-model="formData.zsbh" v-if="isEditPage" v-trim maxlength="100">
                        </el-input>
                        <span v-else>{{ formData.zsbh }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item prop="jg">
                        <template #label><vp-label zh="考核结论" en="Result"/></template>
                        <el-radio-group v-model="formData.jg" v-if="isEditPage">
                            <el-radio :value="10">合格</el-radio>
                            <el-radio :value="20">不合格</el-radio>
                        </el-radio-group>
                        <span v-else>{{ formData.jg === 10 ? '合格' : formData.jg === 20 ? '不合格' : '' }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <VpFileListRow 
                :attachmentList="formData.attachments" 
                @attachmentListEmit="formData.attachments = $event" 
                :readOnly="!isEditPage"
            >
            </VpFileListRow>
        </vp-card>

        <!-- 课程单选页面 -->
		<VpCourseDialog ref="vpCourseDialogRef" @confirm="handleCourseConfirmed"></VpCourseDialog>
        <!-- 人员选择页面 -->
        <VpUserDialog ref="vpUserDialogRef"></VpUserDialog>
    </el-form>
</template>
<script setup lang="ts" name="trainingRecord">
import { ref, defineAsyncComponent, computed } from 'vue';
import validateUtils from '/@/utils/validateUtils';
import { verifyNumberIntegerAndFloat, verifyNumberIntegerAndFloat1 } from '/@/utils/toolsValidate';
import VpDictSelect from '/@/components/vp/dict/VpDictSelect.vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import VpFileListRow from '/@/components/vp/file/VpFileListRow.vue';

const VpCourseDialog = defineAsyncComponent(() => import('/@/components/vp/course/VpCourseDialog.vue'));
const VpUserDialog = defineAsyncComponent(() => import('/@/components/vp/user/VpUserDialog.vue'));

const emits = defineEmits(['formSubmited']);
const props = defineProps({
    // 页面类型
	type: {
		type: String,
		default: 'add',
	},
	// 加载状态
	loading: {
		type: Boolean,
		default: false,
	},
	// 开启验证
	enableValid: {
		type: Boolean,
		default: true,
	},
});
const formData = ref({
    id:"",
    pxid:"",
    rydaid:"",
    ryxm:"",
    bm:"",
    kcid:"",
    kcbh: "",
    kcmcZw: "",
    kcmcYw: "",
    kclb: "",
    fbt:"",
    ksrqsj:"",
    jsrqsj:"",
    ksrq:"",
    kssj:"",
    jsrq:"",
    jssj:"",
    ks:"",
    pxxs:"",
    ksxs:"",
    pxjg:"",
    pxdd:"",
    cj:"",
    jg:null,
    zsbh:"",
    fjglid:"",
    attachments: [] as any[],
});
const formRules = {
    ksrqsj:[ validateUtils.notNull ],
    kcid:[ validateUtils.notNull ],
    rydaid:[ validateUtils.notNull ],
    pxxs:[ validateUtils.notNull ],
    ksxs:[ validateUtils.notNull ],
    jg:[ validateUtils.notNull ],
}

// 页面验证规则
const currentFormRules = computed(() => {
    if (!props.enableValid) {
        return {};
    }
    if (isEditPage.value) {
        return formRules;
    }
    return {};
})

const formRef = ref();

// 是否是编辑页面
const isEditPage = computed(() => {
    return props.type === 'add' || props.type === 'edit';
});


// 清空数据
const initFormData = ()=>{
    formData.value = {
        id:"",
        pxid:"",
        rydaid:"",
        ryxm:"",
        bm:"",
        kcid:"",
        kcbh: "",
        kcmcZw: "",
        kcmcYw: "",
        kclb: "",
        fbt:"",
        ksrqsj:"",
        jsrqsj:"",
        ksrq:"",
        kssj:"",
        jsrq:"",
        jssj:"",
        ks:"",
        pxxs:"",
        ksxs:"",
        pxjg:"",
        pxdd:"",
        cj:"",
        jg:null,
        zsbh:"",
        fjglid:"",
        attachments: [] as any[],
    }
}

// 回显数据
const setData = (data: any) => {
    initFormData();
    formData.value = {
        ...formData.value,
        ...data,
        ksrqsj: data.ksrq ? (data.ksrq + ' ' + data.kssj) : '',
        jsrqsj: data.jsrq ? (data.jsrq + ' ' + data.jssj) : '',
    };
}

/**
 * 获取数据
 */
const getData = (): Promise<any>=>{
    return new Promise((resolve, reject) => {
        formRef.value.validate((valid: boolean) => {
            const data = {
                ...formData.value,
                ksrq: (formData.value.ksrqsj || '').substring(0, 10),
                kssj: (formData.value.ksrqsj || '').substring(11, 16),
                jsrq: (formData.value.jsrqsj || '').substring(0, 10),
                jssj: (formData.value.jsrqsj || '').substring(11, 16),
            };
            if (valid) {
                if(formData.value.jsrqsj && formData.value.ksrqsj > formData.value.jsrqsj){
                    ElMessage.error('开始时间不能大于结束时间/The start date cannot be later than the end date.');
                    reject();
                }
                resolve(data);
            } else {
                reject();
            }
        })
    })
}

// 打开课程选择弹窗
const vpCourseDialogRef = ref();
const handleChooseCourse = () => {
    vpCourseDialogRef.value.handleOpen({
        selectedId: formData.value.kcid,
    });
}

// 课程选择完成
const handleCourseConfirmed = (course: any) => {
    formData.value.kcid = course.id;
    formData.value.kcbh = course.bh;
    formData.value.kcmcZw = course.mcZw;
    formData.value.kcmcYw = course.mcYw;
    formData.value.ks = course.ks;
    formData.value.pxxs = course.pxxs;
    formData.value.ksxs = course.ksxs;
    formData.value.pxjg = course.pxjg;
    formData.value.kclb = course.kclb;
}

// 选择学员
const vpUserDialogRef = ref();
const handleChooseStudent = ()=>{
    vpUserDialogRef.value.handleOpen({
        type: 2, // 1、选择人员t_user 2、选择档案b_p3_001
        multi: false,    // 是否多选
        selected: formData.value.rydaid, // 默认选中人员id
        callback: (data: any) => {
            formData.value.rydaid = data.daid;
            formData.value.ryxm = data.xm;
            formData.value.bm = data.bmmc;
        }
    });
}

// 查看课程
const router = useRouter();
const handleViewCourse = (id: string)=>{
	router.push({
		name: "viewTrainingCourse",
		params: {
			id: id,
		},
	})
}

// 查看人员档案
const handleViewPersonnelFile = (id: string) => {
	router.push({
		name: "viewTrainingPersonnelFile",
		params: {
			id: id,
		},
	})
}

defineExpose({
    setData,
    getData,
})

</script>
<style scoped lang="scss">
</style>